<template>
    <el-form :model="form" label-width="120px">
        <el-form-item label="学生学号">
            <el-input v-model="form.student_id" />
        </el-form-item>
        <el-form-item label="姓名">
            <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="性别">
            <el-select v-model="form.gender" placeholder="请选择性别">
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
            </el-select>
        </el-form-item>
        <el-form-item label="出生日期">
            <el-date-picker
            v-model="form.birth_date"
            type="date"
            placeholder="选择日期"
        />
        </el-form-item>
        <el-form-item label="班级">
            <el-select v-model="form.class_id" @change="getClassInfo">
                <el-option 
                v-for="cls in classes" :key="cls.class_id" :label="cls.class_name" :value="cls.class_id"
                />
            </el-select>
        </el-form-item>
        <el-form-item label="年级">
            <el-input v-model="form.grade" disabled/>
        </el-form-item>
        <el-form-item label="专业">
            <el-input v-model="form.major" disabled/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm() ">确认添加</el-button>
            <el-button @click="closeDialog() ">取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import StudentApi from '@/api/StudentApi'; // 假设有一个API模块来处理与后端的交互

export default {
    data() {
        return {
            form: {
                student_id: '',
                name: '',
                gender: '',
                birth_date: '',
                grade: '',
                major: '',
                class_id: ''
            },
            classes: [] // 班级数据
        };
    },
    methods: {
        submitForm() {
            this.$emit('submit-form', this.form); 
            // 触发提交事件
        },
        closeDialog() {
            this.$emit('close-dialog');
            // 触发关闭事件
        },
        getClassInfo(class_id) {
            const selectedClass = this.classes.find(cls => cls.class_id === class_id);
            if (selectedClass) {
                this.form.grade = selectedClass.grade;
                this.form.major = selectedClass.major_name;
            }
        },
        async fetchClasses() {
            try {
                //获得一个班级，班级中包含专业，年级
                const response = await StudentApi.getClassesForm(); 
                this.classes = response.data;
                console.log(this.classes);
            } catch (error) {
                console.error("班级专业年级信息获取错误:", error);
            }
        }
    },
    created() {
        this.fetchClasses();
    }
};
</script>
